<script setup lang="ts">

import { ref, watch, onMounted, toRefs, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useOrderListStore } from '../../stores/orderList'
import OrderListCom from '../../components/OrderComps/OrderListCom.vue';
const { toBePaidList } = toRefs(useOrderListStore())
const router = useRouter()
const props = defineProps<{
    id: string
}>()
const currentId = computed(()=>{
    return Number(props.id)
})
let activeIndex = ref(0)
const currentList = computed(()=> {
    
    return toBePaidList.value
})
const tabList = [
    {
        text: '全部',
        id: 0
    },
    {
        text: '待付款',
        id: 1
    },
    {
        text: '代发货',
        id: 2
    },
    {
        text: '待收货',
        id: 3
    },
    {
        text: '待评价',
        id: 4
    },
    {
        text: '售后',
        id: 5
    }
]
onMounted(() => {
    activeIndex.value = currentId.value
    

})
watch(() => currentId.value, (n) => {
    
    activeIndex.value = n

})

</script>

<template>
    <div class="order-list-view">
        <div class="order-list-bar ">
            <van-nav-bar>
                <template #left>
                    <van-icon @click="router.go(-1)" name="arrow-left" size="25" color="#979797" />
                </template>
                <template #title>
                    <span class=" text-lg text-gray-500">订单列表</span>
                </template>
                <template #right>
                    <van-icon @click="router.push('/shoppingcart')" name="cart-o" size="25" color="#979797" />
                </template>
            </van-nav-bar>
        </div>

        <div class="order-content">
            <van-tabs v-model:active="activeIndex" swipeable>
                <van-tab v-for="t in tabList" :title="t.text" :key="t.id">

                    <OrderListCom  v-show="l.expiredNotType == t.id" :list="l" 
                        v-for="l in currentList" :key="l.id"></OrderListCom>
                </van-tab>
            </van-tabs>

        </div>
    </div>
</template>


<style lang="scss" scoped>
.order-list-view {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #f6f6f6;
    z-index: 10;
    overflow-y: auto;
}
</style>